<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          label-width="80px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="运单编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="list.id"
                  placeholder="请输入运单编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-model="list.orderId"

                label="订单编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="message.orderId"
                  placeholder="请输入订单编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="调度状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="message.schedulingStatus"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in schedulingStatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="目的地机构:"
                style="margin-bottom: 20px; "
                label-width="110px"
              >
                <Treeselect
                  v-model="message1.name"
                  :options="message1"
                  :normalizer="normalizer"
                  :searchable="true"
                  no-options-text="暂无数据"
                  no-results-text="暂无数据"
                  style="width:100%"
                  placeholder="请选择目的地机构"
                  @select="selectAgency"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="当前所在机构:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <Treeselect
                  v-model="message2.name"
                  :options="message2"
                  :normalizer="normalizer"
                  :searchable="true"
                  no-options-text="暂无数据"
                  no-results-text="暂无数据"
                  style="width:100%"
                  placeholder="请选择当前所在地机构"
                  @select="selectAgency"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="起始地机构:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <Treeselect
                  v-model="message3.name"
                  :options="message3"
                  :normalizer="normalizer"
                  :searchable="true"
                  no-options-text="暂无数据"
                  no-results-text="暂无数据"
                  style="width:100%"
                  placeholder="请选择所属地机构"
                  @select="selectAgency"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="padding-left:50px"
            >
              <el-button
                type="warning"
                @click="search"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('list')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 表单 -->
      <template>
        <el-tabs v-model="activeName" type="card" style="margin-top: 30px;" @tab-click="handleClick">
          <el-tab-pane label="全部 10645" name="5" />
          <el-tab-pane label="新建 10232" name="1" />
          <el-tab-pane label="已装车 0" name="2" />
          <el-tab-pane label="运输中 55" name="3" />
          <el-tab-pane label="到达终端网点 356" name="4" />
          <el-tab-pane label="拒收 2" name="6" />
        </el-tabs>
        <div
          element-loading-text="加载中"
          style="margin-top: 20px"
        >
          <el-card
            shadow="never"
            class="table-card-box"
          >
            <el-button
              type="warning"
              style="margin-bottom:20px"
              @click="handleDispatch()"
            >调度配置</el-button>
            <el-table
              :key="tableKey"
              :data="message"
              fit
              style="width: 100%"
              stripe
              :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            >
              <div
                v-show="(!message || message.length <= 0)"
              >
                <!-- <img
              src="@/icons/pic-kong@2x.png"
              alt="img"
              style="margin-top: 20px;width: 14%;height: 14%;"
            > -->
                <p
                  style="
          margin-top: -20px;
          padding-bottom: 0px;
          "
                >这里空空如也</p>
              </div>
              <el-card
                v-show="(!message || message.length <= 0)"
                shadow="never"
              />
              <el-table-column
                align="left"
                type="index"
                label="序号"
                width="60"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.$index +
                      (list.page - 1) *
                      list.pageSize +
                      1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="运单编号"
                min-width="160"
              >
                <template v-slot="{row}">
                  <span>{{ row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="订单编号"
                min-width="160"
              >
                <template v-slot="{row}">
                  <span>{{ row.orderId }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="运单状态"
                min-width="130"
              >
                <template v-slot="{row}">
                  <span v-if="row.status == 1">新建</span>
                  <span v-else-if="row.status == 2">已装车</span>
                  <span v-else-if="row.status == 3">到达</span>
                  <span v-else-if="row.status == 4">到达终端网点</span>
                  <span v-else-if="row.status == 5">已签收</span>
                  <span v-else>拒收</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="调度状态"
                min-width="100"
              >
                <template v-slot="{row}">
                  <span v-if="row.schedulingStatus == 1">待调度</span>
                  <span
                    v-else-if="row.schedulingStatus == 2"
                  >未匹配线路</span>
                  <span v-else>已调度</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="startAgencyName"
                align="left"
                label="起始营业部"
                width="170"
              />
              <el-table-column
                prop="endAgencyName"
                align="left"
                label="终点营业部"
                width="170"
              />
              <el-table-column
                prop="currentAgencyName"
                align="left"
                label="当前所在机构"
                width="170"
              />
              <el-table-column
                prop="nextAgencyName"
                align="left"
                label="下一个机构"
                width="170"
              />
              <el-table-column
                prop="totalVolume"
                align="left"
                label="货品总体积(立方米)"
                width="170"
              />
              <el-table-column
                prop="totalWeight"
                align="left"
                label="货品总重量(千克)"
                width="170"
              />
              <el-table-column
                prop="created"
                align="left"
                label="创建时间"
                width="170"
              />
              <el-table-column
                prop="updated"
                align="left"
                label="更新时间"
                width="170"
              />
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="85"
                class-name="small-padding fixed-width"
              >
                <template v-slot="{row}">
                  <el-link
                    type="primary"
                    :underline="false"
                    style="color: #419eff;"
                    @click="$router.push({path:'/business/waybillDetails',query: {id:row.id}})"
                  >查看详情</el-link>
                </template>
              </el-table-column>
            </el-table></el-card>
          <div
            v-show="message && message.length > 0"
            class="pagination"
          >
            <!-- 分页 -->
            <div class="pages" style="background-color: #fff;padding-top: 15px;display: flex; justify-content: center;">
              <el-pagination
                :current-page="Number(list.page)"
                :total="Number(total)"
                :page-size="Number(list.pageSize)"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      ref="dataForm"
      title="运输配置"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="add-form-dialog"
    >
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="140px"
        style="width: 100%"
        :rules="ruleInline"
        :model="formBase"
      >
        <el-form-item
          label="最晚任务下发时间"
          prop="created"
        >
          <el-input
            v-model="formBase.dispatchTime"
            placeholder="请输入最晚任务下发时间"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >小时前</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="优先匹配方式"
          required
        >
          <el-select
            v-model="formBase.dispatchMethod"
            placeholder="请选择优先匹配方式"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in dispatchWaybillList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="yeslist"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="handleClose()"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wayballList, getOrganization } from '@/api/wayball'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
// import { status } from 'nprogress'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      list: {
        id: '',
        orderId: 0,
        page: 1,
        pageSize: 10,
        agentId: '',
        status: 1
      },
      schedulingStatus: [
        {
          id: 1,
          name: '待调度'
        },
        {
          id: 2,
          name: '未匹配线路'
        },
        {
          id: 3,
          name: '已调度'
        }
      ],
      dispatchWaybillList: [
        {
          value: 1,
          label: '转运次数最少'
        },
        {
          value: 2,
          label: '成本最低'
        }
      ],
      formBase: {
        dispatchMethod: 2,
        dispatchTime: ''
      },
      ruleInline: {
        dispatchTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^(?:[1-9]|([1-3][0-9])?|4[0-8])$/
                if (!reg.test(Number(value))) {
                  callback(
                    new Error('请输入1-48正整数')
                  )
                } else {
                  callback()
                }
              } else {
                callback(new Error('最晚任务下发时间不能为空'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      dialogVisible: false,
      message: [],
      message1: [],
      message2: [],
      message3: [],

      tableKey: 0,
      total: 0,
      searchkey: false,
      activeName: 'first'
    }
  },
  created() {
    this.getOrganization()
    this.wayballList()
  },
  methods: {
    handleClick() {
      if (this.activeName === '5') {
        this.list.status = null
      } else if (this.activeName === '2') {
        this.list.status = 2
      } else {
        this.list.status = this.activeName
      }
      // else if(this.activeName.name === 5){
      //   this.list.status === this.message.status
      // }
      this.wayballList()
    },
    // 重置
    resetForm(list) {
      this.list = {
        page: 1,
        pageSize: 10,
        statue: this.message.statues
      }
      this.searchkey = false
      this.wayballList()
    },
    // 搜索
    search() {
      this.message.page = 1
      this.wayballList(this.list)
      // this.searchkey = true
    },
    selectAgency(value) {
      this.list.agentId = value.id
    },
    // 获取树状机构信息
    async getOrganization() {
      const msg = await getOrganization()
      this.message1 = JSON.parse(msg)
      this.message2 = JSON.parse(msg)
      this.message3 = JSON.parse(msg)
    },
    // 页面数据
    async wayballList() {
      const msg = await wayballList(this.list)
      this.message = msg.items ? msg.items : []
      this.total = msg.counts ? msg.counts : 0
    },
    // 分页
    handleCurrentChange(num) {
      this.list.page = num
      this.wayballList(this.list)
    },
    // 打开弹窗
    handleDispatch() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 弹框添加
    yeslist() {
      this.$message.success('操作成功')
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-card{
    overflow: visible;
  }
  .custom-tabs .el-tabs__header {
  border-width: 0;
  background-color: pink;
  height: 100px;
}
</style>
